<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <script th:inline="javascript">
        $(function() {
            $("#gd-user-btn-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })

            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })

            $("ul#gd-sys-menu-id > li").click(function () {
                $("ul#gd-sys-menu-id > li").removeClass('active')
                $(this).addClass('active')

                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-menu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })

            // 为用户信息修改链接添加iframe跳转逻辑
            $("#userModifyBtn").click(function(e) {
                e.preventDefault(); // 阻止默认跳转
                const url = $(this).attr("href");
                window.open(url, "contents"); // 在iframe中打开
            });

            // 密码修改改为弹出对话框
            $("#passwordModifyBtn").click(function(e) {
                e.preventDefault();
                $("#change-password-form-id")[0].reset();
                $("#change-password-dialog-id").dialog({
                    autoOpen: true,
                    width: 400,
                    modal: true,
                    resizable: false,
                    title: /*[[#{main.passwd.modify}]]*/'',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'',
                            click: function() {
                                var oldPwd = $("#change-password-form-id input[name='oldPassword']").val();
                                var newPwd = $("#change-password-form-id input[name='newPassword']").val();
                                var confirmPwd = $("#change-password-form-id input[name='confirmPassword']").val();

                                if (!oldPwd || !newPwd || !confirmPwd) {
                                    alert(/*[[#{password.not.empty}]]*/'');
                                    return;
                                }

                                if (newPwd !== confirmPwd) {
                                    alert(/*[[#{password.not.match}]]*/'');
                                    return;
                                }

                                if (newPwd.length < 6) {
                                    alert(/*[[#{password.too.short}]]*/'');
                                    return;
                                }

                                $.ajax({
                                    url: "/disk/user/updatePassword",
                                    type: "POST",
                                    data: {
                                        oldPassword: oldPwd,
                                        newPassword: newPwd,
                                        confirmPassword: confirmPwd
                                    },
                                    success: function(res) {
                                        if (res.success) {
                                            alert(res.message);
                                            $("#change-password-dialog-id").dialog('close');
                                        } else {
                                            alert(res.message);
                                        }
                                    },
                                    error: function(xhr) {
                                        alert("请求失败（状态码：" + xhr.status + "），请重试");
                                    }
                                });
                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'',
                            click: function() {
                                $(this).dialog("close");
                            }
                        }
                    ]
                });
            });

            //导航栏缩放
            let isCollapsed = false;

            $("#toggleNavBtn").click(function(e) {
                e.stopPropagation(); // 防止触发body的点击事件
                isCollapsed = !isCollapsed;

                if (isCollapsed) {
                    $("body").addClass("collapsed-mode");
                    $(this).html('<i class="glyphicon glyphicon-resize-full"></i>');
                } else {
                    $("body").removeClass("collapsed-mode");
                    $(this).html('<i class="glyphicon glyphicon-resize-small"></i>');
                }
            });
        }) // ready function
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
            position: relative; /*相对定位*/
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > section {
            width: 100%;
            flex-grow: 1;
            display: flex;
        }

        body > section > nav {
            flex-basis: 130px;
            height: 100%;
            border-right: 1px solid #ddd;
            margin-top: 20px;
        }

        body > section > iframe {
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id{
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .menu-level3 > li {
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in {
            display: block;
        }

        ul.menu-level3 > li.focus {
            background-color: #ddf;
        }

        /*导航栏缩放*/
        .collapsed-mode .logo-container,
        .collapsed-mode .lang-switcher {
            display: none;
        }

        .collapsed-mode header {
            justify-content: flex-end;
        }

        .toggle-btn {
            position: absolute;
            right: 100px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #333;
            font-size: 18px;
            z-index: 1000;
        }

    </style>

</head>
<body>

<header>
    <div class="logo-container">
        <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
        <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">
    </div>

    <div class="toggle-btn" id="toggleNavBtn">
        <i class="glyphicon glyphicon-resize-small"></i>
    </div>

    <nav class="lang-switcher">
        <a th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'" sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>
                <a href="#" id="userModifyBtn" th:href="@{/user/toUserInfoPage}"> <!-- 用户信息修改链接 -->
                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>

            <li>
                <a href="#" id="passwordModifyBtn" th:href="@{/user/toPasswordPage}"> <!-- 密码修改链接 -->
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>

            <li>
                <a th:href="@{/logout}" target="_parent"> <!-- 登出需刷新父窗口 -->
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>

        </ul>
    </nav>
</header>

<ul id="gd-sys-menu-id" class="nav nav-tabs">
    <li th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child}">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child}">
                        <a th:href="${menu3.getMenuUrl()}" target="contents"> <!-- 保持子菜单在iframe中打开 -->
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe> <!-- 唯一iframe容器 -->
</section>

<div id="change-password-dialog-id" style="display: none">
    <form id="change-password-form-id">
        <div class="form-group">
            <span th:text="#{password.old}"></span>
            <input class="form-control" name="oldPassword" type="password" required>
        </div>
        <div class="form-group">
            <span th:text="#{password.new}"></span>
            <input class="form-control" name="newPassword" type="password" required pattern="^.{6,}$">
        </div>
        <div class="form-group">
            <span th:text="#{password.confirm}"></span>
            <input class="form-control" name="confirmPassword" type="password" required>
        </div>
    </form>
</div>
</body>
</html>
